<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>差旅费标准设置管理系统</title>
    <meta name="keywords" content="差旅费标准设置管理系统" />
    <meta name="description" content="差旅费标准设置管理系统" />
    <link rel="shortcut icon" href="favicon.ico" />

    <!-- 引入公共css -->
    <#include "/inc/header.ftl"/>

    <link rel="stylesheet" href="/css/leaflet.css" />
    <!-- 引入 Leaflet 脚本  -->
    <script src="/js/leaflet.js"></script>
    <link  rel="stylesheet" href="/css/leaflet-geoman.css" />
    <script src="/js/leaflet-geoman.min.js"></script>
</head>

<body class="gray-bg">

<div class="main-container container-fluid">
    <div class="page-container">
        <div class="absolute-add">
            <a class="btn btn-md btn-primary" href="/wb/map/graph/create?area=${area!''}">
                新增/编辑
            </a>
            <#--<a class="btn btn-md btn-default back-js" href="javascript:void(0)">-->
                <#--返回-->
            <#--</a>-->
        </div>

        <div class="absolute-div">
            <!-- <select class="form-control select2 categorySelect2" name="category"></select> -->
            <!-- <input class="form-control"> -->
            <div class="input-group">
                <input type="hidden" id="searchId" value="">
                <input type="text" placeholder="搜地点" name="search" class="form-control input-md search-input">
                <div class="proposal-box">
                    <ul class="proposal-list">

                    </ul>
                </div>
                <div class="input-group-btn">
                    <button class="btn btn-md btn-primary search-btn">
                        搜索
                    </button>
                </div>
            </div>
        </div>

        <div class="col-sm-12" id="map">
        </div>
    </div>
</div>
<!-- 引入公共js -->
<#include "/inc/footer.ftl"/>
<script>
    const map = L.map('map');
    $(document).ready(function() {
        var dimension = ${dimension!43.863733};
        var longitude = ${longitude!87.583393};

        //file:///E:/wb/wlmq/10/758/375.png
        const imgLayer = L.tileLayer('/external/{z}/{x}/{y}.png', {
            minZoom: 6,
            maxZoom: 18
        }).addTo(map);

        // 将地图放大到多边形的位置
        //map.fitBounds(circle.getBounds(), 15);
        map.setView([dimension, longitude], 13);

        map.pm.setLang("zh");

        $("body").on("click", ".search-btn", function(event){
            var graphId = $("#searchId").val();
            if (!graphId){
                parent.layer.alert("请选择正确的图形名称!");
                $(".search-input").val("");
                return;
            }
            location.href = "/wb/map/graph/search?graphId=" + graphId;

        });


        $("body").on("click", ".back-js", function(event){
            var from = localStorage.getItem("p_from");
            if (from && Number(from) > 0){
                location.href = "/wb/map/graph/detail?id=" + from
            }else{
                location.href = "/dashboard";
            }
        });




        $("body").on("click", ".proposal", function(event){
            $(".search-input").val($(event.target).text());
            $("#searchId").val($(event.target).attr("id"));
            $(".proposal-list").html("");
        });

        $(".search-input").on("keyup", function(){
            //查询
            $.ajax({
                contentType: 'application/json;charset=utf-8', //设置请求头信息
                url: '/wb/map/graph/queryByParams?name=' + $(".search-input").val(),
                type: 'POST',
                data: {

                },//数据，这里使用的是Json格式进行传输
                dataType: 'JSON',
                success: function (data) {
                    if (data.status == "200") {
                        var graphs = data.data;
                        var html = "";
                        if (graphs){
                            for (var i = 0; i < graphs.length; i++) {
                                html += '<li class="proposal" id=' + graphs[i].id + '>' + graphs[i].name +'</li>';
                            }
                        }
                        $(".proposal-list").html(html);
                        $("#searchId").val("");
                    } else {
                        parent.layer.alert("发生异常!");
                    }
                }
            });
        });



        //初始化文字
        // var textLayers = [];
        // var marker = L.marker([43.863321, 87.5832992], {
        //     textMarker: true,
        //     text: " 湖上许小区 ",
        // });
        // textLayers[0] = textLayers;

        //初始化多边形
        $.ajax({
            contentType: 'application/json;charset=utf-8', //设置请求头信息
            url: '/wb/map/graph/previewGraph',
            type: 'POST',
            data: {},//数据，这里使用的是Json格式进行传输
            dataType: 'JSON',
            success: function (data) {
                if (data.status == "200") {
                    var polygons = data.data.polygons;
                    for (let i = 0; i < polygons.length; i++) {
                        var html = '<div class="label-content">' + polygons[i].name + '</div>';
                        // 创建一个 DivIcon，用于显示带有文本的长方形
                        const labelIcon = L.divIcon({
                            className: 'custom-label', // 自定义样式
                            html: html, // 包含文本的 HTML
                            iconSize: [100, 30], // 长方形的大小
                            iconAnchor: [6, 15] // 图标的锚点（使其居中）
                        });
                        const polygon =  L.polygon(JSON.parse(polygons[i].areaJson), {
                            color: polygons[i].color,
                            fillColor: polygons[i].fillColor,
                            fillOpacity:polygons[i].fillOpacity
                        }).on('click', (e) => {
                            debugger
                            goDetail(e.target.options.id)
                        }).bindTooltip("<span>案件数量 : " + polygons[i].caseNum +  "</span></br>人员数量 : " + polygons[i].userNum + "</br>线索数量 : " + polygons[i].clueNum).openTooltip().addTo(map);

                        // 获取多边形的边界框
                        polygon.options.id = polygons[i].id;
                        const bounds = polygon.getBounds();
                        // 计算边界框的中心点
                        const center = bounds.getCenter();
                        // 创建标记并将 DivIcon 添加为图标
                        const marker = L.marker(center, { icon: labelIcon , name : polygons[i].name, id : polygons[i].id}).addTo(map);
                        marker.on('click', function(e) {
                            goDetail(this.options.id)
                        });
                    }

                    var circles = data.data.circles;
                    for (let i = 0; i < circles.length; i++) {
                        const html = '<div class="label-content">' + circles[i].name + '</div>';
                        // 创建一个 DivIcon，用于显示带有文本的长方形
                        const labelIcon = L.divIcon({
                            className: 'custom-label', // 自定义样式
                            html: html, // 包含文本的 HTML
                            iconSize: [100, 30], // 长方形的大小
                            iconAnchor: [5, 15] // 图标的锚点（使其居中）
                        });
                        //初始化圆
                        const circle = L.circle(JSON.parse(circles[i].areaJson), {
                            color: circles[i].color,
                            fillColor: circles[i].fillColor,
                            fillOpacity: circles[i].fillOpacity,
                            radius: circles[i].paramJson
                        }).on('click', (e) => {
                            goDetail(e.target.options.id)
                        }).bindTooltip("<span>案件数量 : " + circles[i].caseNum +  "</span></br>人员数量 : " + circles[i].userNum + "</br>线索数量 : " + circles[i].clueNum).openTooltip().addTo(map);

                        circle.options.id = circles[i].id;
                        // 获取多边形的边界框
                        const bounds = circle.getBounds();
                        // 计算边界框的中心点
                        const center = bounds.getCenter();
                        // 创建标记并将 DivIcon 添加为图标
                        const marker = L.marker(center, { icon: labelIcon, name : circles[i].name, id : circles[i].id}).addTo(map);
                        marker.on('click', function(e) {
                            goDetail(this.options.id)
                        });
                    }
                }
            }
        });

    });


    function goDetail(graphId) {
        location.href = "/wb/map/graph/detail?id=" + graphId
    }


</script>


<script src="/js/page/common.js"></script>

</body>
</html>
